<template>
  <div class="flex-row auto" v-for="row in addGasModelArr" style="margin-top:10px;width:96%" >
    <div class="thumbnail"style=" margin-right: 50px;" >
      <img :src="imgsrc" alt="图片加载失败" class="img-rounded" style="width: 60px;">
    </div>
    <form class="form-horizontal" style="flex: 1;">
      <div class="form-group auto">
         <div class="col-sm-3"  style="padding-right: 5px; margin-right: 50px;" >
           <input type="text" class="form-control" v-model="row.f_meter_style" placeholder='气表型号' >
         </div>
         <div class="col-sm-3" style=" margin-right: 50px;"  id="comprehen-gasBra-addGasModIfo-表类型">
            <v-select :value.sync="row.type" :options='metertitles' placeholder='表类型' close-on-select>
            </v-select>
         </div>
         <div class="col-sm-3" style="padding-right: 5px;">
           <input type="text" class="form-control" v-model="row.f_pulse" placeholder='脉冲'>
         </div>
       </div>

       <div class="form-group auto" style="margin-top:10px;">
           <div class="col-sm-3" style="padding-right: 5px; margin-right: 50px;">
             <input type="text" class="form-control" v-model="row.f_rated_traffic" placeholder='额定流量'>
           </div>
           <div class="col-sm-3" style=" margin-right: 50px;">
             <input type="text" class="form-control" v-model="row.f_coding" placeholder='海力表型编码' >
           </div>
           <div class="col-sm-3" v-if="f_meter_type !=='机表'" id="comprehen-gasBra-addGasModIfo-大小卡">
             <v-select :value.sync="row.cardsize"  :options='cardsizes' placeholder='大小卡' close-on-select>
             </v-select>
           </div>
       </div>
    </form>
    <div style="width: 60px;">
      <img :src="imgdelete" alt="图片加载失败" class="img-rounded" style="width: 60px;padding: 20px;margin-left: -15px;cursor: pointer;"
      @click="deleteMeter($index)" v-if="row.model_used">
    </div>
  </div>

  <div class="panel panel-default auto text-center" @click="addMeter()" style="cursor: pointer;">
    <img :src="imgmeter" alt="图片加载失败" class="img-rounded" style="width: 50px;margin:10px;">
  </div>
</template>

<script>
import AppData from '../../../../stores/AppData'
import Vue from 'vue'
import { HttpResetClass } from 'vue-client'

export default {
  data () {
    return {
      addGasModelArr: [],
      imgsrc: '/images/mainicon/biaopan.png',
      imgdelete: '/images/mainicon/deletedevice.png',
      imgmeter: '/images/mainicon/addmeter.png',
      f_gasbrand_id: '',
      f_meter_type: ''
    }
  },
  props: ['data'],
  watch: {
    'data': {
      handler (val) {
        this.judgeInitValue(val)
      }
    },
    'data.f_meter_type[0]' (val) {
      this.f_meter_type = val
    }
  },
  ready () {
    this.judgeInitValue(this.data)
  },
  methods: {
    addMeter () {
      this.addGasModelArr.push({
        cardsize: [],
        type: [],
        model_used: true,
        f_gasbrand_id: this.f_gasbrand_id
      })
    },
    deleteMeter (index) {
      this.addGasModelArr.splice(index, 1)
      console.log('气表型号删除之后，，，，', this.addGasModelArr)
    },
    getUpdate () {
      // let tablename = 't_gasmodel'
      let condition = 'g.f_gasbrand_id=' + "'" + this.f_gasbrand_id + "'"
      let http = new HttpResetClass()
      http.load('POST', 'rs/sql/getModels', {data: {condition: condition}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
        if (res.data.length > 0) {
          for (var i = 0; i < res.data.length; i++) {
            res.data[i].type = res.data[i].f_type ? [res.data[i].f_type] : ''
            res.data[i].cardsize = res.data[i].f_size_card ? [res.data[i].f_size_card] : ''
          }
          res.data.forEach((item) => {
            Vue.set(item, 'model_used', item.counts === 0)
            // item.model_used = true
            // let tablename = 't_userfiles'
            // let condition = 'f_gasmodel_id = ' + "'" + item.id + "'"
            // this.$SqlService.singleTable(tablename, condition).then((res) => {
            //   Vue.set(item, 'model_used', res.data.length <= 0)
            // })
          })
          this.addGasModelArr = res.data
        }

        if (this.addGasModelArr.length === 0) {
          this.initmodel()
        }
      }).catch ((error) => this.$dispatch('error', '获取气表明细错误', this.data, error))
      // this.$SqlService.singleTable(tablename, condition)
      // .then(
      //   (res) => {
      //     if (res.data.length > 0) {
      //       for (var i = 0; i < res.data.length; i++) {
      //         res.data[i].type = res.data[i].f_type ? [res.data[i].f_type] : ''
      //         res.data[i].cardsize = res.data[i].f_size_card ? [res.data[i].f_size_card] : ''
      //       }
      //       res.data.forEach((item) => {
      //         // item.model_used = true
      //         let tablename = 't_userfiles'
      //         let condition = 'f_gasmodel_id = ' + "'" + item.id + "'"
      //         this.$SqlService.singleTable(tablename, condition).then((res) => {
      //           Vue.set(item, 'model_used', res.data.length <= 0)
      //         })
      //       })
      //       this.addGasModelArr = res.data
      //     }
      //
      //     if (this.addGasModelArr.length === 0) {
      //       this.initmodel()
      //     }
      //   }
      // )
    },
    judgeInitValue (val) {
      this.f_meter_type = val.f_meter_type[0]
      if (val.id && val.id !== '') {
        this.f_gasbrand_id = val.id
        this.getUpdate()
      } else {
        this.isConfirm = true
        this.isModify = false
        this.initmodel()
      }
    },
    initmodel () {
      this.addGasModelArr = [{
        cardsize: [],
        type: [],
        model_used: true
      }]
    }
  },
  computed: {
    metertitles () {
      return AppData.getParam('表类型')
    },
    cardsizes () {
      return AppData.getParam('大小卡')
    }
  }
}
</script>
